<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TypeChat自然语言处理流程图</title>
    
    <!-- Material Design Lite CSS -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
    
    <!-- Google Fonts -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap">
    
    <!-- Mermaid JS for diagrams -->
    <script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
    
    <style>
        :root {
            --primary-color: #3f51b5;
            --secondary-color: #f50057;
            --background-color: #f5f5f5;
            --card-color: #ffffff;
            --text-color: #333333;
            --border-radius: 8px;
            --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        body {
            font-family: 'Roboto', sans-serif;
            margin: 0;
            padding: 20px;
            background-color: var(--background-color);
            color: var(--text-color);
            line-height: 1.6;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .card {
            background-color: var(--card-color);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            padding: 24px;
            margin-bottom: 24px;
        }

        .header {
            display: flex;
            align-items: center;
            margin-bottom: 24px;
            border-bottom: 1px solid #e0e0e0;
            padding-bottom: 16px;
        }

        .header-icon {
            background-color: var(--primary-color);
            color: white;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 16px;
        }

        h1 {
            color: var(--primary-color);
            margin: 0;
            font-weight: 500;
        }

        h2 {
            color: var(--primary-color);
            margin-top: 0;
            font-weight: 500;
            border-bottom: 2px solid var(--primary-color);
            padding-bottom: 8px;
            display: inline-block;
        }

        .diagram-container {
            margin: 24px 0;
            overflow-x: auto;
        }

        .legend {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
            margin-top: 24px;
            padding: 16px;
            background-color: #f0f4ff;
            border-radius: var(--border-radius);
        }

        .legend-item {
            display: flex;
            align-items: center;
            margin-right: 16px;
        }

        .legend-color {
            width: 20px;
            height: 20px;
            margin-right: 8px;
            border-radius: 4px;
        }

        .note {
            background-color: #fff8e1;
            padding: 16px;
            border-left: 4px solid #ffc107;
            margin: 16px 0;
            border-radius: 0 var(--border-radius) var(--border-radius) 0;
        }

        .footer {
            text-align: center;
            margin-top: 40px;
            color: #666;
            font-size: 14px;
        }

        .back-button {
            display: inline-flex;
            align-items: center;
            margin-bottom: 16px;
            color: var(--primary-color);
            text-decoration: none;
            font-weight: 500;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .container {
                padding: 12px;
            }
            
            .card {
                padding: 16px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <a href="material-planning-assistant.html" class="back-button">
            <span class="material-icons" style="margin-right: 4px;">arrow_back</span>
            返回规划助手
        </a>
        
        <div class="card">
            <div class="header">
                <div class="header-icon">
                    <span class="material-icons">integration_instructions</span>
                </div>
                <h1>TypeChat自然语言处理流程图</h1>
            </div>

            <h2>流程概述</h2>
            <p>
                本流程图展示了系统如何使用TypeChat框架将用户输入的自然语言规划需求转换为结构化的JSON指令，
                并最终执行这些指令来完成城市规划任务。
            </p>

            <div class="diagram-container">
                <div class="mermaid">
                    flowchart TD
                        A[用户输入自然语言规划需求] --> B[系统构建上下文信息]
                        B --> C[TypeChat调用大模型进行语义理解]
                        C --> D{信息是否充分?}
                        D -->|否| E[大模型生成问题]
                        E --> F[向用户提问]
                        F --> A
                        D -->|是| G[基于Schema生成JSON指令]
                        G --> H[系统验证JSON格式]
                        H --> I{验证是否通过?}
                        I -->|否| J[错误处理]
                        J --> C
                        I -->|是| K[执行指令]
                        K --> L[更新地图视图]
                        
                        classDef userAction fill:#e3f2fd,stroke:#2196f3,stroke-width:2px;
                        classDef systemProcess fill:#e8f5e9,stroke:#4caf50,stroke-width:2px;
                        classDef modelProcess fill:#f3e5f5,stroke:#9c27b0,stroke-width:2px;
                        classDef decision fill:#fff3e0,stroke:#ff9800,stroke-width:2px;
                        classDef error fill:#ffebee,stroke:#f44336,stroke-width:2px;
                        
                        class A,F userAction;
                        class B,H,K,L systemProcess;
                        class C,E,G modelProcess;
                        class D,I decision;
                        class J error;
                </div>
            </div>

            <div class="legend">
                <div class="legend-item">
                    <div class="legend-color" style="background-color: #e3f2fd; border: 2px solid #2196f3;"></div>
                    <span>用户操作</span>
                </div>
                <div class="legend-item">
                    <div class="legend-color" style="background-color: #e8f5e9; border: 2px solid #4caf50;"></div>
                    <span>系统处理</span>
                </div>
                <div class="legend-item">
                    <div class="legend-color" style="background-color: #f3e5f5; border: 2px solid #9c27b0;"></div>
                    <span>模型处理</span>
                </div>
                <div class="legend-item">
                    <div class="legend-color" style="background-color: #fff3e0; border: 2px solid #ff9800;"></div>
                    <span>决策点</span>
                </div>
                <div class="legend-item">
                    <div class="legend-color" style="background-color: #ffebee; border: 2px solid #f44336;"></div>
                    <span>错误处理</span>
                </div>
            </div>

            <h2>TypeChat处理详情</h2>
            <div class="diagram-container">
                <div class="mermaid">
                    flowchart LR
                        A[用户输入] --> B[构建上下文]
                        B --> C[TypeChat处理器]
                        C --> D[Schema验证器]
                        D --> E[JSON转换器]
                        E --> F{类型检查}
                        F -->|成功| G[结构化JSON指令]
                        F -->|失败| H[错误反馈]
                        H --> C
                        
                        classDef input fill:#bbdefb,stroke:#1976d2,stroke-width:2px;
                        classDef process fill:#c8e6c9,stroke:#388e3c,stroke-width:2px;
                        classDef validator fill:#d1c4e9,stroke:#512da8,stroke-width:2px;
                        classDef output fill:#dcedc8,stroke:#689f38,stroke-width:2px;
                        classDef check fill:#ffecb3,stroke:#ffa000,stroke-width:2px;
                        classDef error fill:#ffccbc,stroke:#e64a19,stroke-width:2px;
                        
                        class A input;
                        class B,C process;
                        class D,E validator;
                        class G output;
                        class F check;
                        class H error;
                </div>
            </div>

            <div class="note">
                <strong>注意：</strong> TypeChat框架通过预定义的Schema（类型定义）确保生成的JSON指令符合系统要求，
                大大提高了自然语言处理的准确性和可靠性。当信息不足时，系统会主动向用户提问，确保生成的指令是完整且可执行的。
            </div>
            
            <h2>Schema定义示例</h2>
            <pre style="background-color: #f5f5f5; padding: 16px; border-radius: 4px; overflow-x: auto;">
/**
 * 城市规划AI指令系统响应协议
 * @context 当用户需求明确时返回指令，信息不足时要求澄清
 * @rule 所有指令必须包含可执行的明确地理要素操作
 */
export type AIResponse = InstructionResponse | QuestionResponse

/**
 * 指令响应
 */
export type InstructionResponse = {
  type: "instruction"
  actions: Instruction[]
}

/**
 * 询问响应
 */
export type QuestionResponse = {
  type: "question"
  content: string
}

/**
 * 地理要素操作指令
 */
export type Instruction = {
  action: 'ADD_FEATURE' | 'UPDATE_FEATURE' | 'REMOVE_FEATURE' | 'CREATE_BUFFER'
  layerType: 'POLYGON' | 'LINE' | 'POINT'
  params: {
    attributes: {
      name: string
      description?: string
    }
  }
}
</pre>
        </div>
    </div>

    <div class="footer">
        © 2023 城市规划AI助手 | 基于TypeChat框架的自然语言处理系统
    </div>

    <script>
        // 初始化Mermaid
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
    </script>
</body>
</html>
